<template>
  <div class="cpjbxx">
    <!-- <h2>产品基本信息</h2> -->
     <el-row >
        <el-col :span="16">
          <div class="content">
            <el-row>
              <el-col :span="24"><h2 class="contentname">产品基本信息</h2></el-col>
              <el-col :span="24">
                <el-row>
                  <el-col :span="3"><span class="contenttitle">产品名称：</span></el-col>
                  <el-col :span="21"><span class="juti">{{ productInfo.cropName }}</span></el-col>
                </el-row>
              </el-col>
              <el-col :span="24">
                  <el-row>
                    <el-col :span="3"><span class="contenttitle">溯源码：</span></el-col>
                    <el-col :span="21"><span class="juti">{{ productInfo.traceabilityCode }}</span></el-col>
                  </el-row>
              </el-col>
              <el-col :span="24">
                  <el-row>
                    <el-col :span="3"><span class="contenttitle">生产基地：</span></el-col>
                    <el-col :span="21"><span class="juti">{{ productInfo.plantingLocation }}</span></el-col>
                  </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="photo">
            <el-row>
              <el-col>
                <img src="@/assets/images/bander.png" alt="">
              </el-col>
              <el-col>
                <div class="renzheng">
                  <svg t="1754129731921" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27055" data-spm-anchor-id="a313x.search_index.0.i32.17a83a81z5qBtx" width="30" height="30"><path d="M513.792 983.296c-21.248 0-40.96-10.496-52.736-28.16l-62.464-93.952c-11.008-16.64-30.976-24.832-50.688-20.992l-110.592 22.272c-20.736 4.096-42.24-2.304-57.344-17.152-15.104-15.104-21.504-36.352-17.152-57.344l22.272-110.592c3.84-19.712-4.352-39.424-20.992-50.688l-93.952-62.464c-17.664-11.776-28.16-31.488-28.16-52.736s10.496-40.96 28.16-52.736L164.352 396.8c16.64-11.008 24.832-30.976 20.992-50.688L163.072 235.52c-4.096-20.736 2.304-42.24 17.152-57.344 15.104-15.104 36.352-21.504 57.344-17.152l110.592 22.272c19.712 4.096 39.424-4.352 50.688-20.992l62.464-93.952c11.776-17.664 31.488-28.16 52.736-28.16s40.96 10.496 52.736 28.16l62.464 93.952c11.008 16.64 30.976 24.832 50.688 20.992l110.592-22.272c20.736-4.096 42.24 2.304 57.344 17.152 15.104 15.104 21.504 36.352 17.152 57.344l-22.272 110.592c-3.84 19.712 4.352 39.424 20.992 50.688l93.952 62.464c17.664 11.776 28.16 31.488 28.16 52.736s-10.496 40.96-28.16 52.736L863.744 627.2c-16.64 11.008-24.832 30.976-20.992 50.688l22.272 110.592c4.096 20.736-2.304 42.24-17.152 57.344-15.104 15.104-36.352 21.504-57.344 17.152l-110.592-22.272c-19.712-3.84-39.424 4.352-50.688 20.992L566.272 954.88c-11.52 17.664-31.232 28.416-52.48 28.416z m-155.904-205.568c36.608 0 71.168 18.176 91.904 49.408l62.464 93.952c0.256 0.256 0.512 0.768 1.536 0.768s1.28-0.512 1.536-0.768l62.464-93.952c25.088-37.632 69.632-56.064 113.92-47.104l110.592 22.272c0.256 0 1.024 0.256 1.536-0.512s0.512-1.28 0.512-1.536l-22.272-110.592c-8.96-44.288 9.728-89.088 47.104-113.92l93.952-62.464c0.256-0.256 0.768-0.512 0.768-1.536 0-1.024-0.512-1.28-0.768-1.536L828.928 448c-37.632-25.088-56.064-69.632-47.104-113.92l22.272-110.592c0-0.256 0.256-1.024-0.512-1.536-0.768-0.768-1.28-0.512-1.536-0.512l-110.592 22.272c-44.288 8.96-89.088-9.728-113.92-47.104l-62.464-93.952c-0.256-0.256-0.512-0.768-1.536-0.768s-1.28 0.512-1.536 0.768l-62.464 93.952c-25.088 37.632-69.632 56.064-113.92 47.104l-110.592-22.272c-0.256 0-1.024-0.256-1.536 0.512-0.768 0.768-0.512 1.28-0.512 1.536l22.272 110.592c8.96 44.288-9.728 89.088-47.104 113.92l-93.952 62.464c-0.256 0.256-0.768 0.512-0.768 1.536s0.512 1.28 0.768 1.536L198.144 576c37.632 25.088 56.064 69.632 47.104 113.92l-22.272 110.592c0 0.256-0.256 1.024 0.512 1.536 0.768 0.768 1.28 0.512 1.536 0.512l110.592-22.272c7.68-1.792 15.104-2.56 22.272-2.56z" fill="#4caf50" p-id="27056" data-spm-anchor-id="a313x.search_index.0.i33.17a83a81z5qBtx" class=""></path><path d="M474.112 661.248c-7.168 0-14.592-2.56-20.224-7.68l-138.24-122.112c-12.8-11.264-13.824-30.72-2.816-43.264 11.264-12.8 30.72-13.824 43.264-2.816l116.48 102.912 190.976-194.304c11.776-12.032 31.232-12.288 43.52-0.256 12.032 11.776 12.288 31.232 0.256 43.52l-211.456 215.296c-5.632 5.632-13.568 8.704-21.76 8.704z" fill="#4caf50" p-id="27057" data-spm-anchor-id="a313x.search_index.0.i34.17a83a81z5qBtx" class=""></path></svg>
                  已通过质量认证
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
     </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getArchive } from '@/api/ncpsy/management/archive';
import { ElMessage } from 'element-plus';

const route = useRoute()
const productInfo = ref({})

const loadProductData = async () => {
  try {
    // 从路由参数获取ID，优先使用productId，如果没有则使用primaryId
    const productId = route.query.productId
    const primaryId = route.query.primaryId
    
    // 确定使用哪个ID进行查询,没办法了这他妈侯智博写的屎山代码,只能这样记录了,不要碰这个productId,我也不知大是哪里传进来的
    const idToUse = productId || primaryId
    
    if (!idToUse) {
      ElMessage.warning('未获取到产品ID')
      // 使用默认数据
      productInfo.value = {
        cropName: '有机苹果',
        traceabilityCode: '2024020501',
        plantingLocation: '阳光农场',
        batchNumber: '2024020501',
        productionBase: '阳光农场'
      }
      return
    }

    // 调用API获取产品档案数据
    const res = await getArchive(idToUse)
    if (res.code === 200) {
      productInfo.value = res.data
      console.log('产品数据加载成功:', res.data)
    } else {
      ElMessage.error('获取产品数据失败')
      // 使用默认数据
      productInfo.value = {
        cropName: '有机苹果',
        traceabilityCode: '2024020501',
        plantingLocation: '阳光农场',
        batchNumber: '2024020501',
        productionBase: '阳光农场'
      }
    }
  } catch (error) {
    console.error('获取产品数据失败:', error)
    ElMessage.error('获取产品数据失败')
    // 使用默认数据
    productInfo.value = {
      cropName: '有机苹果',
      traceabilityCode: '2024020501',
      plantingLocation: '阳光农场',
      batchNumber: '2024020501',
      productionBase: '阳光农场'
    }
  }
}

onMounted(() => {
  loadProductData()
})
</script>

<style scoped>
.cpjbxx{
  padding: 20px;
}
.content,.photo{
  height: 200px;
}
.content{
text-align: left;
}

.contentname{
  font-size: 30px;
  font-weight: 500;
  color: #333;
  display: inline-block;
  margin-bottom: 10px;
}
.contenttitle,.juti{
  font-size: 20px;
  display: inline-block;
  margin: 10px 0;
}
.contenttitle{
  color: gray;
}
.juti{
  color: #000;
}


img{
  width: 500px;
  height: 170px;
  border-radius: 15px;
}
.renzheng{
  width: 500px;
  height: 40px;
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 20px;
  color: #5ba858;
}
</style>